<template>
	<div id="navi_container">
		<div class="ui list">
			<!-- 默认的共有部分note -->
			<div class="item" v-if="isEditable">
				<i class="caret right icon"></i>
				<div class="content">
					<div class="header"
					@click="$emit('clickCommon')">Common Parts</div>
				</div>
			</div>
			<div v-for="(type, type_index) in list"
			class="item">
				<i class="caret icon"
				:class="{down: !type.collapse, right: type.collapse}"></i>
				<div class="content">
					<!-- type list-->
					<div class="header type"
					@click="clickHeader(type)">
						<input class="bold"
						:class="{editing: type.editing}"
						v-model="type.name"
						:title="type.name"
						:readonly="!type.editing"
						:style="{width: autoWidth(type.name, 'bold') + 'px'}"
						@enter.stop="$emit('editType', type)">
						<actions v-if="isEditable"
						:editing="type.editing"
						:config="typeActions.actions"
						:width="typeActions.width"
						@add1="$emit('addSubtype', type)"
						@add2="$emit('addSubtypeApi', type)"
						@edit="type.editing = true"
						@remove="$emit('removeType', type, type_index)"
						@editDone="$emit('editType', type)"
						@clickHeart="$emit('addSubtype', type)">
						</actions>
					</div>
					<div class="description"
					v-show="!type.collapse">
						<!-- subtype list -->
						<div class="ul list"
						 v-if="type.content.length">
						 	<div v-for="(subtype, subtype_index) in type.content"
						 	class="item">
						 		<i class="caret icon"
						 		v-if="!subtype.isApi"
						 		:class="{down: !subtype.collapse, right: subtype.collapse}"></i>
						 		<div class="content"
						 		:class="{api: subtype.isApi}"
						 		@click="clickHeader(subtype)">
						 			<input
						 			:class="{bold: !subtype.isApi, editing: subtype.editing, active:currentApi.id === subtype.id}"
						 			v-model="subtype.name"
						 			:title="subtype.name"
						 			:readonly="!subtype.editing"
						 			:style="{width: !subtype.isApi ? autoWidth(subtype.name, 'bold') + 'px' : autoWidth(subtype.name) + 'px'}"
						 			@enter.stop="$emit('editSubtype', subtype)">
						 			<actions v-if="isEditable"
						 			:editing="subtype.editing"
						 			:config="subtype.isApi ? apiActions.actions : subtypeActions.actions"
						 			:width="subtype.isApi ? apiActions.width : subtypeActions.width"
						 			@add2="$emit('addApi', subtype)"
						 			@edit="subtype.editing = true"
						 			@remove="$emit('removeSubtype', subtype, subtype_index, type)"
						 			@editDone="$emit('editSubtype', subtype)"
						 			@clickHeart="$emit('addApi', subtype)">
						 			</actions>
						 			<!-- api list -->
						 			<div v-if="subtype.content.length"
						 			v-show="!subtype.collapse"
						 			class="ul list api-container">
						 				<li v-for="(api, api_index) in subtype.content"
						 				class="item api"
						 				@click.stop="$emit('clickApi', api, 'Apis')">
						 					<input
						 					:class="{editing: api.editing, active:currentApi.id === api.id}"
						 					v-model="api.name"
						 					:title="api.name"
						 					:readonly="!api.editing"
						 					:style="{width: autoWidth(api.name) + 'px'}"
						 					@enter.stop="$emit('editApi', api)">
						 					<actions v-if="isEditable"
						 					:editing="api.editing"
						 					:config="apiActions.actions"
						 					:width="apiActions.width"
						 					@edit="api.editing = true"
						 					@remove="$emit('removeApi', api, api_index, subtype)"
						 					@editDone="$emit('editApi', api)">
						 					</actions>
						 				</li>
						 			</div>
						 		</div>
						 	</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<slot></slot>
	</div>
</template>
<script>
import AV from '../global.js';
import actions from './NaviActions.vue'
export default{
	name:'navi',
	mounted(){
	},
	data(){
		return{
			typeActions: {
				width: '6.8em',
				actions: ['add1', 'add2', 'remove', 'edit']
			},
			subtypeActions: {
				width: '5.4em',
				actions: ['add2', 'remove', 'edit']
			},
			apiActions:{
				width: '4em',
				actions: ['remove', 'edit']
			}
		}
	},
	methods:{
		clickHeader(l){
			l.collapse = !l.collapse;
			if(l.isApi) this.$emit('clickApi', l, 'Subtypes');
		},
		autoWidth(val, classname){
			var tmp = document.createElement("span");
	        tmp.className = classname;
	        tmp.innerHTML = val.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
	        document.body.appendChild(tmp);
	        var theWidth = tmp.getBoundingClientRect().width;
	        document.body.removeChild(tmp);
	        return theWidth+3;
		}
	},
	props: ['list', 'isEditable','currentApi'],
	components: {actions}
}
</script>
<style lang='less' scoped>
	#navi_container{
		border-radius: 5px;
		width: 250px;
		border: 1px solid #ccc;
		padding: 10px;
		display: inline-block;
		background: ivory;
	}
	.item{
		cursor: pointer;
		i{
			font-size: .8em;
			margin-right:0;
		}
	}
	.bold{
		font-weight: bold;
	}
	input{
		border-color: transparent;
		max-width: 140px;
		font-size: 13px;
		outline: none;
		background: ivory;
		transition: transform .5s;
		&.editing{
			border-bottom: 1px dashed #aaa;
		}
		&.active{
			border-bottom: 1px solid #666;
		}
		&:hover{
			transform: translate3d(5px,0,0);
		}
	}
	.ul.list{
		padding-top: .3em !important;
	}
	.api-container{
		padding: 0 !important;
	}
</style>